<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>F86 学生｜员工管理系统 随便吧</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">托管</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="../img/pug1.jpg" class="layui-nav-img">
                        tester
                    </a>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="navUl">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">menu group 1</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-id="student">学生管理</a></dd>
                            <dd><a href="javascript:;" data-id="class">班级管理</a></dd>
                            <dd><a href="javascript:;" data-id="cource">课程管理</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <div style="padding: 0 15px;">
                <!-- 选项卡 -->
                <div class="layui-tab" lay-filter="demo" lay-allowClose="true">
                    <ul class="layui-tab-title"></ul>
                    <div class="layui-tab-content"></div>
                </div>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        const $ = layui.$// 获取 jquery
            , element = layui.element// 获取 element 给选项卡用
            , form = layui.form // 获取表单
            , table = layui.table
            , layer = layui.layer
            // , laypage = layui.laypage
            , laydate = layui.laydate
            ;

        // 初始显示学生界面
        addTab('default student.html', `./student.html`, 'student');

        $('#navUl').click(function (event) {
            let pageId = event.target.dataset.id;
            // $('#content').load(`./${pageId}.html`);
            addTab(event.target.innerText, `./${pageId}.html`, pageId); // innerText:XX管理  url  data-id
        });
        function addTab(text, url, pageId) {
            if ($(`.layui-tab-title li[lay-id=${pageId}]`).length > 0) { // 已有
                element.tabChange('demo', pageId);
            } else { // 没有，新增
                $.ajax({
                    url: url,
                    success: function (data) {
                        element.tabAdd('demo', {
                            title: text
                            , content: data //支持传入html
                            , id: pageId
                        });
                        element.tabChange('demo', pageId);
                    }
                });
            }
        }
    </script>
</body>

</html>